<template>
  <div id="main" style="width: 100%; height: 300px"></div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],

  data() {
    return {
      chart: null,
      chartData: null,
      data: null,
      optiondata: {},
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions(datad) {
      debugger;
      this.optiondata  = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}"
            },
            // toolbox: {
            //     show : true,
            //     feature : {
            //         mark : {show: true},
            //         restore : {show: true},
            //         saveAsImage : {show: true}
            //     }
            // },
            series : [
                {
                    name:'指标',
                    type:'gauge',                
                    min:0,
                    max:100,            
                    startAngle: 190,
                    endAngle: -10,
                    splitNumber: 10,       // 分割段数，默认为5
                    radius: '75%',
                    progress:{
                      show: true,
                      width: true,
                    overlap: true,
                    color:'ff4500',
                    },
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, '#ff4500'],[0.8, '#ff4500'],[1, '#ff4500']], 
                            width: 5, //仪表盘外围圆宽度
                            shadowColor : '#ff4500', //默认透明
                            shadowBlur: 20
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 5,   // 每份split细分多少段
                        length :8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                        show: true,
                        distance: 10,
                    },
                    splitLine: {           // 分隔线
                        show: true,        // 默认显示，属性show控制显示与否
                        length :12,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width:3,
                            color: '#ff4500',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer : {
                      show:false,
                        width : 4,
                         length: 100,
                         color: '#ff4500',
                    },
                    title : {
                        show : false,
                        offsetCenter: [0, '50%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 10,
                            color: '#228b22',
                        }
                    },
                    detail : {
                        name: '{name}',
                        formatter:'{value}'+'%' ,
                        offsetCenter: [0, '-10%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 25,
                            color: '#ff4500'
                        },
                    },
                    data:[{value: 48, name: '总供水量比例'}]
                }
            ]
        };



      this.chart.setOption(this.optiondata);

// debugger;
//        this.data= [20,180,220,170,50,90,100,180,300,150,210,170,50,70,110,77,59,30,50,190,210,390];
//         var index=0;
//             setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
//                 this.optiondata.series[0].data[0].value = this.data[index++%this.data.length];
//                 this.chart.setOption(this.optiondata, true);
//             }, 2000);


    },
  },
};
</script>
